<template>
  <div id="news">
    <div class="lazyload-frame">
      <div id="newsbox" class="flex lazyload">
        <div style="flex: 1">
          <lazyshow transition="fade-right"
            ><div id="newshead">
              我将在这里发布一些学习心得及资料<br />欢迎大家前来学习!
            </div></lazyshow
          >
          <lazyshow transition="fade-left-1s"
            ><div id="newscontent">
              追随前端发展潮流 始终热衷于前端<br />有兴趣的同学可以收藏本站。
            </div></lazyshow
          >
          <el-button size="medium" @click="Collection()"
            ><i class="el-icon-star-off"></i> 点击收藏</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/assets/js/bus.js";
import Lazyshow from "../../common/lazyshow/lazyshow.vue";

export default {
  name: "news",
  components: {
    Lazyshow,
  },
  methods: {
    Collection() {
      let url = "www.baidu.com";
      let title = "CodqXdq的个人博客";
      let ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf("360se") > -1) {
        Bus.$emit("error", "由于360浏览器功能限制，请按 Ctrl+D 手动收藏！");
      } else if (ua.indexOf("msie 8") > -1) {
        window.external.AddToFavoritesBar(url, title); //IE8
      } else if (document.all) {
        //IE类浏览器
        try {
          window.external.addFavorite(url, title);
        } catch (e) {
          Bus.$emit("error", "您的浏览器不支持该功能，请按 Ctrl+D 手动收藏！");
        }
      } else if (window.sidebar) {
        //firfox等浏览器；
        window.sidebar.addPanel(title, url, "");
      } else {
        Bus.$emit("error", "您的浏览器不支持该功能，请按 Ctrl+D 手动收藏！");
      }
    },
  },
  mounted() {},
};
</script>

<style scoped>
#news {
  width: 100%;
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items: center;
}
#newsbox {
  width: 900px;
  min-width: 900px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 1px 1px 3px gray;
  padding-top: 20px;
  padding-left: 40px;
  overflow: hidden;
  background:white url(../../../assets/img/sliderimg/news.jpg);
  background-size: 450px 130px;
  background-position: right bottom;
  background-repeat: no-repeat;
}
#newshead {
  color: #627597;
  font-weight: bold;
  font-size: 1.1rem;
}
#newscontent {
  color: #627597;
  font-size: 0.8rem;
  margin-top: 10px;
  height: 50px;
}
</style>
